<template>
  <div>
    <!-- <el-carousel height="150px">
      <el-carousel-item v-for="item in 1" :key="item">
        <img
          src="../../../assets/banner.png"
          class="bannerImg"
        />
        <h1>webbanner</h1>
      </el-carousel-item>
    </el-carousel> -->
    <div class="container">
      <img :src="url" />
      <!-- <el-image :fit="contain
"
        :src="url"
      ></el-image> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: require("../assets/banner.png"),
    };
  },
};
</script>

<style scoped>
.container {
  position: flex;
  height: 200px;
  /* border: dashed blue 1px; */
}
.container img {
  object-fit: cover;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-shadow: 1px 4px 10px #e0e0e0;
}
.container el-image {
  height: 200px;
  max-height: 50%;
  max-width: 50%;
}
</style>